import React, { Component } from 'react';

import { getSongWords } from '../../utils/http';

export default class SongWords extends Component {
  constructor(props) {
    super(props);
    this.state = {
      songWords: [],
      selectIndex: 0
    }
    this.playOrPause = this.props.playOrPause;
    this.setIsPlay = this.props.setIsPlay;
    this.songInfo = this.props.songInfo;
    this.audio = this.props.audio;
    this.speedBar = this.props.speedBar;
    this.innerSpeedBar = this.props.innerSpeedBar;
    this.innerSpeedBarTop = this.props.innerSpeedBarTop;
    this.outer = React.createRef();
    this.inner = React.createRef();
  }
  componentDidMount() {
    getSongWords(this.songInfo.id).then(res => {
      console.log(res);
      let lrc = res.data.lrc.lyric;
      let arr1 = lrc.split("[").slice(1);
      let arr2 = arr1.map((item) => {
        let tempArr = item.split("]");

        let strTime = tempArr[0];
        let arrTime = strTime.split(":");
        let num = parseInt(arrTime[0]) * 60 + parseFloat(arrTime[1]);

        return {
          time: tempArr[0],
          con: tempArr[1],
          num: num,
        };
      });
      this.setState({
        songWords: arr2
      })
    })
    let audio = this.audio.current;
    let outer = this.outer.current;
    let inner = this.inner.current;
    let speedBar = this.speedBar.current;
    let innerSpeedBar = this.innerSpeedBar.current;
    let innerSpeedBarTop = this.innerSpeedBarTop.current;
    //播放时间发生了改变
    audio.ontimeupdate = (e) => {
      let { songWords } = this.state;
      let n = 0;
      songWords.forEach((item, index) => {
        if (item.num <= audio.currentTime) {
          n = index;
        }
      });
      this.setState({
        selectIndex: n,
      });
      // if(n === songWords.length-1){
      //   setTimeout(()=>{
      //     this.playOrPause();
      //   },songWords[n].num)
      // }
      // 获取歌曲总时长（毫秒）
      let songTimeLength = this.songInfo.duration;
      // 获取当前歌曲播放时长（秒）
      // audio.currentTime // 歌曲当前播放时间（秒）
      let songPlayTimer = audio.currentTime;
      // 获取进度条总长度
      let speedBarWidth = speedBar.clientWidth;
      // 计算滚动条的长度
      let innerSpeedBarLength = parseInt(songPlayTimer*1000*speedBarWidth/songTimeLength, 10);
      // 设置滚动条的width
      innerSpeedBar.style.width = innerSpeedBarLength + 'px';
      // 设置圆点的left
      innerSpeedBarTop.style.left = (innerSpeedBarLength - 10) + 'px';
      
      // 播放时间向上取整后大于等于歌曲时间
      if(Math.ceil(songPlayTimer*1000)>=songTimeLength){
        this.setIsPlay(false);
      }
      // 设置歌词滚动的top值
      inner.style.top = -(((n - 10) * outer.clientHeight) / 19) + "px";
    };
  }
  render() {
    return (
      <div className='songWords'>
        <div
          className="outer"
          ref={this.outer}
        //   onTouchStart={(e) => this.start(e)}
        //   onTouchMove={(e) => this.move(e)}
        //   onTouchEnd={(e) => this.end(e)}
        >
          <div className="inner" ref={this.inner}>
            {/* 3.展示歌词 */}
            {this.state.songWords.map((item, index) => {
              return (
                <div
                  key={item.time}
                  className={index === this.state.selectIndex ? "select" : ""}
                >
                  {item.con}
                </div>
              );
            })}
          </div>
        </div>

      </div>
    )
  }
}